<template>
    <view class="groupBuy">
<!--        <view v-if="need_wait">-->
<!--            <MNeedWait></MNeedWait>-->
<!--        </view>-->
        <view v-if="need_login_show">
            <m-login></m-login>
        </view>
        <view v-if="need_certify_show">
            <m-certify></m-certify>
        </view>
        <view v-if="need_address">
            <m-no-address></m-no-address>
        </view>
        <view><m-swiper :list="banner_list"></m-swiper></view>
        <view class="box_1">
            <view>
                <view class="product_price">￥{{product_info.price}}</view>
                <view class="product_name">{{product_info.name}}</view>
            </view>
            <view  @tap="goNext1('buyDataLog')">
                <view><image class="buy_log_img" src="../../static/img/buy_log.png" /></view>
                <view class="buy_log_text">购买记录</view>
            </view>
        </view>
        <view class="box_2">
            <view><button class="button" @tap="buyNow">立即购买</button></view>
        </view>

        <view class="box_3">
            <view class="box_3_child">
                <view class="data_log_box">
                    <view><image class="data_log_img" src="../../static/img/data_log.png"/></view>
                    <view class="total_num">累计拼团成功订单：{{total_bonus_number}}</view>
                </view>
                <view class="watchDetail"  @tap="goNext2('groupBuyLog')">查看拼团明细</view>
            </view>
            <view class="progress">
                    <van-progress
                            :percentage="percent"
                            color="#ffffff"
                            :show-pivot=false
                            :color="color"
                    />
                <view>
                    <view class="percent">{{percent}}%</view>
                </view>
            </view>
        </view>
        <view class="switch">
            <view class="switch_text">自动拼团</view>
            <view class="switch_box">
                <van-switch
                        :checked="switch_checked"
                        active-color="#FF9502"
                        inactive-color="#E8E8E8"
                        @change="switchChange"
                />
            </view>
        </view>
        <view class="box_4">
            <view class="wallet_box_2" >
                <view>名称</view>
                <view>买入时间</view>
                <view>价格</view>
                <view>状态</view>
            </view>
            <view class="orderData" v-for="(item,index) in order_list" :key="index">
                <view class="orderData1">{{item.name}}</view>
                <view class="orderData2">{{item.created_at}}</view>
                <view class="orderData3">{{item.price}}</view>
                <view class="orderData4">
                    <view v-if="is_auto_group===1" class="orderData4_button">自动拼团中</view>
                    <view v-else-if="item.status==='1'" class="orderData4_button" @tap="pingBuy(item)">拼团</view>
                    <view v-else-if="item.status==='2'" class="orderData4_button_1">拼团中</view>
                </view>
            </view>
        </view>

        <view class="overlayer" v-show="tips_2_show" @touchmove.prevent >
            <view class="tips_2_box">
                <view class="tips_text_1">
                    <view class="tips_text_1_1">温馨提示</view>
                    <view class="tips_2_close" @tap="closeTips2">X</view>
                </view>
                <view class="tips_text_2">
                    <text class="tips_text_2_1">请选择支付方式</text>
                </view>
                <view class="buy_choose_box">
                    <view class="check_box_1">
                        <view class="check_box_1_1">
                            <van-checkbox   :value="tips2_buy_checked_1" checked-color="#666666" @change="handleSelectGroup1">
                            </van-checkbox>
                        </view>
                        <view class="tips_text_choose_1">
                            <text>余额支付</text>
                        </view>
                    </view>
                    <view v-show="group_ticket_show">
                        <view class="check_box_1" >
                            <view class="check_box_1_2">
                                <van-checkbox  :value="tips2_buy_checked_2" checked-color="#666666" @change="handleSelectGroup2">
                                </van-checkbox>
                            </view>
                            <view class="tips_text_choose_2">
                                <text>购货券支付</text>
                            </view>
                        </view>
                    </view>

                </view>

                <view class="tips_2_button_1_box">
                    <button class="tips_button_1" @tap="buyConfirmBefore">确&nbsp定</button>
                </view>

                <view class="tips_2_button_2_box">
                    <button class="tips_button_2" @tap="closeTips2">取&nbsp消</button>
                </view>

            </view>
        </view>





        <van-dialog
                use-slot
                :title="title"
                :show="show"
                show-cancel-button
                @close="buyClose"
                @confirm="buyConfirm"
        >
            <image class="buy_img" :src="product_img" />
            <view class="show_tips">请确认是否花费￥{{product_info.price}}购买{{product_info.name}}</view>
            <view class="check_box">
                <view>
                    <van-checkbox class="s-all"  :value="buy_checked" checked-color="#FF9502" @change="handleSelect1">
                    </van-checkbox>
                </view>
                <view class="tips_text">
                    我已阅读并同意<text @tap="goWatchAgreement()" class="agreement">《数字协议证书》</text>
                </view>
            </view>
        </van-dialog>


        <van-dialog
                use-slot
                title="请确认该订单是否参与拼团活动"
                :show="ping_show"
                show-cancel-button
                @close="buyClose"
                @confirm="pingConfirm"
        >
            <view class="check_box">
                <view>
                    <van-checkbox class="s-all"  :value="ping_checked" checked-color="#FF9502" @change="handleSelect2">
                    </van-checkbox>
                </view>
                <view class="tips_text">
                    我已阅读并同意<text @tap="goWatchAgreement()" class="agreement">《数字协议证书》</text>
                </view>
            </view>
        </van-dialog>

        <Mtips :toShow="tips_show" :message="message"  @sure="sure"></Mtips>
    </view>
</template>

<script>
    // import Dialog from "../../wxcomponents/vant/dist/dialog/dialog";
    import MLogin from '@/components/m-login.vue'
    import MAddress from '@/components/m-noAddress.vue'
    import MCertify from '@/components/m-certify.vue'
    import Mtips from '@/components/m-tips.vue'
    import MSwiper from '@/components/m-goodsSwiper.vue'
    import MNeedWait from '@/components/m-needWait.vue'
    import MNoAddress from "../../components/m-noAddress";
    export default {
        name: 'groupBuy',
        data() {
            return {
                banner_list: [],
                product_info:{
                    price:'',
                    name:''
                },
                order_list:[],
                total_bonus_number:'',
                percent:'',
                color:"#FF5245", // 控制按钮颜色
                product_img:"",
                page:1,
                is_load:0,
                show:false,
                ping_show:false,
                tips_show:false,
                buy_checked:true,
                ping_checked:true,
                title:'',
                message:'',
                is_fresh:0,
                need_login_show:false,
                need_certify_show:false,
                need_address:false,
                type:1,
                current_order_id:'',
                switch_checked:false,
                is_auto_group:this.$store.state.user_info.p_open_auto_group,
                click_query:false,
                need_wait:true,
                add_goods_err:'',
                sure_button_show:false,
                tips_2_show:false, //支付弹框显示
                tips2_buy_checked_1:true,
                tips2_buy_checked_2:false,
                group_ticket_show:false, //购货券支付选项是否展示
                group_ticket_buy_type:1
            }
        },
        async onLoad(){
            let user_data = await this.$apis.getUserInfo({access_token:''})
            if(user_data.code===0){
                this.$store.commit("SET_USERINFO",user_data.data)
            }
            if(this.$store.state.user_info.p_open_auto_group>0){
                this.switch_checked=true
            }
        },
        async onShow(){ // 页面每次显示都触发(请求累计成功订单,个人拼团订单状态)
            if(this.$store.state.token!==''){
                this.need_login_show=false
            }else{
                this.need_login_show=true
                return
            }
            let user_data = await this.$apis.getUserInfo({access_token:''})
            if(user_data.data.is_valid===1){
                this.need_certify_show=false
            }else{
                this.need_certify_show=true
                return
            }
            if(parseInt(user_data.data.has_address)>0){
                this.need_address=false
            }else{
                this.need_address=true
                return
            }
            if(user_data.data.is_group_buy_ticket>0){
                this.group_ticket_show=true
            }

            // if(this.is_fresh){
                this.add_goods_err=''
                uni.showLoading({})
                this.page=1
                this.is_load=0
                this.order_list=[]
                this.total_bonus_number=''
                this.percent=''
                this.tips2_buy_checked_1=true
                this.tips2_buy_checked_2=false
                this.group_ticket_buy_type=1
                this.getGroupBuyGoodsInfo()
                this.getGroupOrderInfo()
                this.getUserOrderList()
                uni.hideLoading()
            // }


        },
        mounted(){
            // uni.showLoading({})
            // this.getGroupBuyGoodsInfo()
            // this.getGroupOrderInfo()
            // this.getUserOrderList()
            // this.is_fresh=1
            // uni.hideLoading()
        },
        onReachBottom() {  //分页加载请求数据
            if(this.is_load>0){
                this.page++
                this.getUserOrderList()
            }else{
                uni.showToast({
                    title:"没有更多数据啦",
                    icon:"none",
                    duration: 3000,
                })
            }

        },
        methods: {
            buyClose(){//立即购买弹窗关闭
              this.show=false
              this.ping_show=false
            },

            buyConfirmBefore(){ // 立即购买确认
                // console.log(this.group_ticket_show)
                // if(!this.buy_checked){
                //     uni.showToast({
                //         title:"请先阅读并同意电子协议",
                //         icon:"none",
                //         duration: 3000,
                //     })
                //     return
                // }else{
                    // this.buyGoodsNow()
                    this.show=true
                    this.tips_2_show=false
                // }


            },

            buyConfirm(){ // 立即购买确认
                if(!this.buy_checked){
                    uni.showToast({
                        title:"请先阅读并同意电子协议",
                        icon:"none",
                        duration: 3000,
                    })
                    return
                }else{
                    this.buyGoodsNow()
                    this.show=false
                    this.tips_2_show=false
                }


            },
            pingConfirm(item){//拼团确认
                if(!this.ping_checked){
                    uni.showToast({
                        title:"请先阅读并同意电子协议",
                        icon:"none",
                        duration: 3000,
                    })
                    return
                }else{
                    this.addGroupBuy(item)
                    this.ping_show=false
                }

            },
            async buyNow(){ //立即购买
                // uni.showToast({
                //     title:"当前暂不能购买！",
                //     icon:"none",
                //     duration: 3000,
                // })
                // return
                //先判断是否添加了地址
                let user_data = await this.$apis.getUserInfo({access_token:''})
                if(user_data.code===0){
                    if(user_data.data.is_address<1){
                        uni.showToast({
                            title:"请先添加地址才能参与拼团",
                            icon:"none",
                            duration: 3000,
                        })
                        setTimeout(async ()=>{
                            uni.navigateTo({
                                url: "/pages/user/addAddress"
                            })
                        },3000)
                        return
                    }
                }
                // if(this.add_goods_err!==''){
                //     uni.showToast({
                //         title:this.add_goods_err,
                //         icon:"none",
                //         duration: 3000,
                //     })
                //     return
                // }

              this.tips_2_show=!this.tips_2_show
            },
            handleSelect1(){ // buy选择单选框
                this.buy_checked=!this.buy_checked
            },
            handleSelect2(){ // ping选择单选框
                this.ping_checked=!this.ping_checked
            },
            handleSelectGroup1(){ // 选择余额支付
                if(this.tips2_buy_checked_1===true){
                    return
                }else{
                    this.tips2_buy_checked_1=true
                    this.tips2_buy_checked_2=false
                    this.group_ticket_buy_type=1
                }
            },
            handleSelectGroup2(){ // 选择购货券支付
                if(this.tips2_buy_checked_2===true){
                    return
                }else{
                    this.tips2_buy_checked_2=true
                    this.tips2_buy_checked_1=false
                    this.group_ticket_buy_type=2
                }
            },

           async pingBuy(item){ //点击拼团按钮
                // uni.showToast({
                //     title:"当前拼团功能暂未开放",
                //     icon:"none",
                //     duration:3000
                // })
                // return
                //先判断是否添加了地址
               return  // 暂停操作

                let user_data = await this.$apis.getUserInfo({access_token:''})
                if(user_data.code===0){
                    if(user_data.data.is_address<1){
                        uni.showToast({
                            title:"请先添加地址才能参与拼团",
                            icon:"none",
                            duration: 3000,
                        })
                        setTimeout(async ()=>{
                            uni.navigateTo({
                                url: "/pages/user/addAddress"
                            })
                        },3000)
                        return
                    }
                }



                this.current_order_id=item.id
                this.ping_show=true

            },
            goWatchAgreement(){ // 查看协议
                this.$router.push({
                    route:this.$routesConfig.watchAgreement,
                    query:{sign_url:"https://xhrdadmin.scxhrd.com"+this.$store.state.user_info.agreement_doc}
                })
                // uni.showToast({
                //     title:"暂无协议可查阅",
                //     icon:"none",
                //     duration:3000
                // })
            },
            //获取商品信息列表
            async getGroupBuyGoodsInfo(){
                let resData= await this.$apis.getGroupBuyGoodsInfo()
                this.product_info=resData.data.model
                this.product_img=resData.data.model.image
                let banner_list=resData.data.model.imageList
                this.banner_list=[]
                banner_list.forEach((item)=>{
                    this.banner_list.push(item)
                })
            },
            //获取累计数据以及个人当前循环中奖次数占比
            async getGroupOrderInfo(){
              let resData = await this.$apis.getGroupOrderInfo({access_token:''})
                this.total_bonus_number=resData.data.total_winning
                this.percent=String(resData.data.percent)
                if(this.percent>30 && this.percent<70){
                    this.color="#FFEB41"
                }
                if(this.percent>70){
                    this.color="#99E317"
                }
            },
            //获取个人的拼团订单明细
            async getUserOrderList(){
                uni.showLoading({});
                let resData = await this.$apis.getUserOrderList({access_token:'',page:this.page})
                if(resData.code===0){
                    this.order_list.push(...resData.data.lists)
                    this.is_load=resData.data.is_load
                }
                uni.hideLoading();
            },

            //立即购买
            async buyGoodsNow(){
                if(!this.click_query) {
                    this.click_query = true
                    uni.showLoading({});
                    let resData = await this.$apis.buyGoodsNow({access_token:'',need_back:1,buy_type:this.group_ticket_buy_type})
                    if(resData.code===0){
                        uni.showToast({
                            title:"购买成功",
                            icon:"success",
                            duration: 3000,
                        })
                        this.page=1
                        this.is_load=0
                        this.order_list=[]
                        this.total_bonus_number=''
                        this.percent=''
                        this.getGroupOrderInfo()
                        this.getUserOrderList()
                        //更新个人信息
                        let user_data = await this.$apis.getUserInfo({access_token:''})
                        if(user_data.code===0){
                            this.$store.commit("SET_USERINFO",user_data.data)
                        }
                    }else if(resData.code!==203){
                        this.add_goods_err=resData.message
                    }
                    // uni.hideLoading();
                    this.click_query=false
                }

            },

            //参与拼团
            async addGroupBuy(item){
                //先判断是否添加了地址
                let user_data = await this.$apis.getUserInfo({access_token:''})
                if(user_data.code===0){
                    if(user_data.data.is_address<1){
                        uni.showToast({
                            title:"请先添加地址才能参与拼团",
                            icon:"none",
                            duration: 3000,
                        })
                        setTimeout(async ()=>{
                            uni.navigateTo({
                                url: "/pages/user/addAddress"
                            })
                        },3000)
                        return
                    }
                }
                if(!this.click_query) {
                    this.click_query = true
                    uni.showLoading({});
                    let resData = await this.$apis.addGroupBuy({access_token:'',order_id:this.current_order_id,need_back:1})
                    if(resData.code===0){
                        uni.showToast({
                            title:"加入拼团成功",
                            icon:"success",
                            duration: 3000,
                        })
                        setTimeout(async ()=>{
                            this.page=1
                            this.is_load=0
                            this.order_list=[]
                            this.total_bonus_number=''
                            this.percent=''
                            this.getGroupOrderInfo()
                            this.getUserOrderList()
                        },1000)
                    }
                    // uni.hideLoading();
                    this.click_query=false
                }

            },

            goNext1(){
                uni.navigateTo({
                    url: "/pages/home/buyDataLog"
                })
            },
            goNext2(){
                uni.navigateTo({
                    url: "/pages/home/groupBuyLog"
                })
            },
            sure(res){ // 子组件传递过来的东西
                this.tips_show=res;
            },
           async switchChange(){ //自动拼团开关开启关闭(同时更新拼团订单)
                return  //暂停点击功能
               //先判断是否添加了地址
               let user_data = await this.$apis.getUserInfo({access_token:''})
               if(user_data.code===0){
                   if(user_data.data.is_address<1){
                       uni.showToast({
                           title:"请先添加地址才能参与拼团",
                           icon:"none",
                           duration: 3000,
                       })
                       setTimeout(async ()=>{
                           uni.navigateTo({
                               url: "/pages/user/addAddress"
                           })
                       },3000)
                       return
                   }
               }
                if(!this.click_query){
                    this.click_query=true
                    uni.showLoading({})
                    let resData=await  this.$apis.handleAutoGroup({access_token:'',need_back:1})
                    if(resData.code===0){
                        let user_data = await this.$apis.getUserInfo({access_token:''})
                        if(user_data.code===0){
                            this.$store.commit("SET_USERINFO",user_data.data)
                            this.is_auto_group=user_data.data.p_open_auto_group
                        }
                        this.switch_checked=!this.switch_checked

                        this.page=1
                        this.is_load=0
                        this.order_list=[]
                        this.total_bonus_number=''
                        this.percent=''
                        this.getGroupOrderInfo()
                        this.getUserOrderList()
                }
                    this.click_query=false
                }

               // uni.hideLoading();

            },
            closeTips2(){ //关闭支付选择弹框
                this.tips_2_show=false
            }
        },
        components: {
            MNoAddress,
            MSwiper,
            Mtips,
            MLogin,
            MCertify,
            MNeedWait,
            MAddress
        },
    }
</script>
<style>
    page {
        background-color:#FAFAFA
    }
   .van-progress{
        height: 18rpx !important;
       width: 85% !important;
    }
    .swiper-box{
        height: 620rpx !important;
    }
    .van-switch__node{
        z-index: 0 !important;
    }
</style>
<style scoped lang="less">
    .show_tips{
        width: 80%;
        margin-left: 10%;
        font-size: 30rpx;
        color: #333333;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        text-align: center;
    }
    .buy_img{
        margin-left: 66rpx;
        margin-top: 50rpx;
        width: 500rpx;
        height: 350rpx;
    }
    .check_box{
        margin-left: 50rpx;
        margin-bottom: 30rpx;
        margin-top: 20rpx;
    }
    .check_box_1{
        margin-left: 50rpx;
        margin-bottom: 30rpx;
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .agreement{
        color: #FF9502;
    }
    .box_1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #ffffff;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
    }
    .product_price{
        font-size: 40rpx;
        color: #FF9502;
        margin-left: 20rpx;
    }
    .product_name{
        font-size: 30rpx;
        color: #333333;
        margin-left: 20rpx;
    }
    .buy_log_img{
        width: 40rpx;
        height: 50rpx;
        transform: translate(50%,0);
    }
    .buy_log_text{
        font-size: 22rpx;
        color: #FFA900;
        margin-right: 20rpx;
    }
    .button{
        border: none !important;
        background-image: linear-gradient(to top, #FF7200,#FFAE00);
        color: #ffffff;
        width: 90%;
        margin-left: 5%;
        margin-top: 30rpx;
    }
    .box_3{
        background-color: #ffffff;
        margin-top: 10rpx;
        padding-top: 10rpx;
    }
    .box_3_child{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .data_log_box{
        display: flex;
        flex-direction: row;
        margin-left: 20rpx;
    }
    .data_log_img{
        width: 50rpx;
        height: 32rpx;
    }
    .progress{
        margin-top: 20rpx;
        margin-left: 5%;
    }
    .total_num{
        color: #333333;
        font-size: 26rpx;
        margin-left: 5rpx;
    }
    .watchDetail{
        color: #FF9502;
        font-size: 26rpx;
        margin-right: 20rpx;
    }
    .percent{
        color: #333333;
        font-size: 26rpx;
        position: relative;
        top:-27rpx;
        left: 630rpx;
        width: 80rpx;
    }
    .wallet_box_2{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color:#F6F6F6 ;
        color:#999999 ;
        padding-bottom: 20rpx;
        padding-top: 20rpx;
        font-size: 26rpx;
    }
    .orderData{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #ffffff;
        font-size: 26rpx;
        padding-top: 20rpx;
        padding-bottom: 10rpx;
    }
    .orderData1{
        width: 200rpx;
    }
    .orderData2{
        width: 200rpx;
    }
    .orderData3{
        width: 150rpx;
        text-align: center;
    }
    .orderData4{
        width: 150rpx;
        text-align: center;
    }
    .orderData4_button{
        background-color: #FF9502;
        border-radius: 5px;
        color: #ffffff;
        line-height: 2;
    }
    .orderData4_button_1{
        background-color: green;
        border-radius: 5px;
        color: #ffffff;
        line-height: 2;
    }
    .switch{
        display: flex;
        flex-direction: row;
        justify-content: left;
        background-color: #ffffff;
    }
    .switch_text{
        margin-left: 20rpx;
        line-height: 2;
    }
    .switch_box{
        margin-left: 20rpx;
    }
    .check_box{
        margin-left: 60rpx;
        margin-bottom: 30rpx;
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        justify-content: left;
    }
    .ware_bak{
        background-image: url("https://qiniu.scxhrd.com/static/img/ware_bac.png");
        background-size: 100%;
        background-repeat: no-repeat;
        /*width: 95%;*/
    }
    .overlayer{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:10;
        background-color:#000;
        background: rgba(0, 0, 0, 0.5);
        /*opacity: 0.7;*/
    }
    .tips_2_box{
        width: 700rpx;
        height: 550rpx;
        background-image: url("https://qiniu.scxhrd.com/static/img/ware_bac.png");
        background-size: 100%;
        background-repeat: no-repeat;
        transform: translate(4%,55%);
        opacity: 1;
    }
    .tips_text_1{
        text-align: center;
        color: #ffffff;
    }
    .tips_text_1_1{
        font-size: 45rpx;
        padding-top: 20rpx;
    }
    .tips_text_2{
        text-align: center;
        color: #666666;
    }
    .tips_text_2_1{
        font-size: 36rpx;
        margin-top: 10rpx;
    }
    .tips_2_close{
        font-size: 47rpx;
        width: 40rpx;
        height: 40rpx;
        position: relative;
        top:-80rpx;
        right:-639rpx;

    }
    .buy_choose_box{
        margin-left: 25%;
        padding-top: 20rpx;
    }
    .tips_text_choose_1{
        padding-left: 20rpx;
        color: #666666;

    }
    .tips_text_choose_2{
        padding-left: 20rpx;
        color: #666666;
        }
    .check_box_1_1{
        margin-top: 5rpx;
    }
    .check_box_1_2{
        margin-top: 5rpx;
    }
    .tips_2_button_1_box{
        text-align: center;
    }
    .tips_2_button_2_box{
        text-align: center;
    }
    .tips_button_1{
        width: 320rpx;
        height: 60rpx;
        background-color: #F28300;
        color: #ffffff;
        font-size: 30rpx;
        line-height: 2;
        margin-top: 20rpx;
    }
    .tips_button_2{
        width: 320rpx;
        height: 60rpx;
        background-color:#E5E5E5;
        color: #ffffff;
        font-size: 30rpx;
        line-height: 2;
        margin-top: 30rpx;
    }


    .tips_button_1::after{
        border:1px solid transparent;
    }
    .tips_button_2::after{
        border:1px solid transparent;
    }




</style>
